<template>
  <div>
    <VolBox
      :model.sync="model.boxOne"
      title="结账"
      :width="600"
      :height="400"
    >
    <VolForm
        :loadKey="true"
        ref="formFieldsreset"
        :formFields="formFields1"
        :formRules="formRules1"
      ></VolForm>
      <div slot="footer">
      <Button type="success" @click="setAccounts">结账</Button>
      <Button type="info" @click="model.boxOne=false">关闭</Button>
    </div>
 </VolBox>
 <!-- 打印模板 -->
 <div style="width: 0;height: 0;">
  <div id="printTest">
  <div class="printCont">
    <div>
      <h3>订单号</h3>{{row.order_number}}
    </div>
    <div>
      <h3>付款码</h3>{{row.pay_code}}
    </div>
    <div>
      <h3>支付金额</h3>{{row.pay_price}}
    </div>
    <div>
      <h3>支付时间</h3>{{row.pay_time}}
    </div>
    <div>
      <h3>退款时间</h3>{{row.refund_time}}
    </div>
    <div>
      <h3>消费金额</h3>{{row.shop_price}}
    </div>
    <div>
      <h3>退款金额</h3>{{row.refund_price}}
    </div>
    <div>
      <h3>结账操作人</h3>{{row.user}}
    </div>
    <div style="border-bottom: 1px solid #000;">
      <h3>备注</h3>{{row.remark}}
    </div>
    <h2 style="margin:20px 0;">结账后押金退款将在1-5个工作日内到账</h2>

    <div class="clientSign">
      <span>客户签字:</span>
    </div>
  </div>
 </div></div>
 <VolBox
      :model.sync="model.boxtwo"
      title="编辑"
      :width="600"
      :height="400"
    >
    <VolForm
        :loadKey="true"
        ref="formFieldsreset"
        :formFields="formField1s2"
        :formRules="formRules2"
      ></VolForm>
      <div slot="footer">
        <Button type="info" v-print="printObj">打印</Button>
        <Button type="success" @click="submit1">确定</Button>
      <Button type="info" @click="model.boxtwo=false">关闭</Button>
    </div>
 </VolBox>
  </div>
</template>

<script>
import VolTable from "@/components/basic/VolTable.vue";
import VolBox from "@/components/basic/VolBox.vue";
import Icons from "@/components/basic/Icons.vue";
import VolForm from "@/components/basic/VolForm.vue";

export default {
  components: {
    VolTable,
    Icons,
    VolBox,
    VolForm
  },
  data() {
    return {
      row:new Object(),
      printObj: {
        id: "printTest",
        popTitle: "订单详情"
      },
      OrderNumber:'',
      credit_status:false,
      model: {
        boxOne: false,
        boxtwo: false,
      
      },
      formRules1: [
        [
        {
            title: "付款码",
            required: true,
            field: "pay_code",
            type: "text",
            readonly: true,
            colSize: 6,
          },
        ],
          [
          {
            title: "付款时间",
            required: true,
            field: "pay_time",
            type: "text",
            readonly: true,
            colSize: 10,
          },
        ],
          [
          {
            title: "支付金额",
            required: true,
            field: "pay_price",
            type: "text",
            readonly: true,
            colSize: 10,
          },
        
        ],[
          {
            title: "消费金额",
            field: "Price",
            type: "string",
            required: true,
            validator: (rule, val, callback) => {
              if (val) {
                let alphanumeric = /(^[\-0-9][0-9]*([.][0-9]{0,2})?)$/;
                if (!alphanumeric.test(val)) {
                  this.credit_status=true
                  return "请输入正确金额";
                }else if(val>this.formFields1.pay_price){
                  this.credit_status=true
                  return "消费金额不能大于支付金额";
                }
                else{
                  this.credit_status = false
                }
              } else {
                return "请输入正确金额";
              }
            },
            colSize: 8
          },
        ],[
          {
            title: "退回金额",
            readonly: true,
            required: true,
            field: "refund_price",
            type: "text",
            colSize: 8,
          },
        ],[
          {
            title: "客人预留信息",
            required: true,
            readonly: true,
            field: "refund_remark",
            type: "text",
            colSize: 8,
          },
        ],[
          {
            title: "备注",
            readonly: true,
            required: true,
            field: "remark",
            type: "text",
            colSize: 8,
          },
        ]
          
        ,
    
      ],
      formField1s2: {
        order_number:"",
        pay_code: "",
        pay_time: "",
        Price: "",
        refund_price: "",
        refund_remark: "",
        remark: "",
        pay_price:'',
      },
      formRules2: [
        [
        {
            title: "订单号",
            required: true,
            field: "order_number",
            type: "text",
            readonly: true,
            colSize: 6,
          },
        {
            title: "付款码",
            required: true,
            field: "pay_code",
            type: "text",
            readonly: true,
            colSize: 6,
          },
          {
            title: "付款时间",
            required: true,
            field: "pay_time",
            type: "text",
            readonly: true,
            colSize: 6,
          },
        ],
          
          [
          {
            title: "支付金额",
            required: true,
            field: "pay_price",
            type: "text",
            readonly: true,
            colSize: 6,
          },
          {
            title: "退回金额",
            readonly: true,
            required: true,
            field: "refund_price",
            type: "text",
            colSize: 6,
          },
        ],
    [
          {
            title: "客人预留信息",
            required: true,
            readonly: true,
            field: "refund_remark",
            type: "text",
            colSize: 8,
          },
        ],[
          {
            title: "备注",
            field: "remark",
            type: "text",
            colSize: 8,
          },
        ]
          
        ,
    
      ],
      formFields1: {
        pay_code: "",
        pay_time: "",
        Price: "",
        refund_price: "",
        refund_remark: "",
        remark: "",
        pay_price:'',
      },
    }
  },
  created() {
  },
  methods: {
    open3(row){
      this.row =row
      this.model.boxtwo = true;
     
        this.formField1s2.order_number= row.order_number;
        this.formField1s2.pay_code= row.pay_code;
        this.formField1s2.pay_time= row.pay_time;
        this.formField1s2.refund_price= row.refund_price;
        this.formField1s2.refund_remark= row.refund_remark;
        this.formField1s2.pay_price= row.pay_price;
        this.formField1s2.remark= row.remark;
        let users = sessionStorage.getItem('user')
        this.row.user=JSON.parse(users).userName
    },
    open2(row) {
      console.log(row, "this.model.boxOne");
      this.model.boxOne = true;
      this.OrderNumber=row.order_number
        this.formFields1.pay_code= row.pay_code;
        this.formFields1.pay_time= row.pay_time;
        this.formFields1.refund_price= row.refund_price;
        this.formFields1.refund_remark= row.refund_remark;
        this.formFields1.pay_price= row.pay_price;
        this.formFields1.remark= row.remark;
    },
    submit1(){
      let formData = {
      mainData: {
        id:this.row.id,
        remark:this.formField1s2.remark
      },
      detailData: null,
      delKeys: null
    };
    this.http
        .post("api/Small_auth_order/update", formData)
        .then((res) => {
          if (res.status) {
              this.model.boxtwo = false;
              this.$Message.success("保存成功");
            this.$store.getters.data().viewPageTest.refresh();

            } else {
              this.$Message.error(res.message);
            }
        });
    },
    setAccounts(){
      let saveModel={
        Price:this.formFields1.Price,
        OrderNumber:this.OrderNumber,
      }
      if(this.credit_status){
        this.$message.error("请输入正确的消费金额");
      }else{
      this.$confirm("确定要结账吗?", "", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
           
            this.http
            .post("api/Small_auth_order/SettlementOrder", saveModel)
            .then((res) => {
              if(res.success){
                this.model.boxOne = false;
                this.$message.success('结账成功');
              }else{
                this.$message({
              type: "info",
              message: res.message,
            });
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消结账",
            });
          });
    }
  }
  }
};
</script>
<style lang="less" scoped>
.printCont{
  width: 100%;
  height: 100%;
  color: #000;
}
.printCont div{
display: flex;
width: 100%;
height: 10%;
padding:0 10px;
line-height: 50px; 
border: 1px solid #000;
border-bottom:0;
}

.printCont h3{
  width: 90px;
  color: #000;
}
.clientSign{
  margin:20px 0px;
  display: flex;
  justify-content: flex-end;
  font-size: 18px;
  border: 0 !important;
  text-align: left;
}
.clientSign span{
  display: block;
  width: 200px;
}
</style>
